<template>
  <div class="replenish">
    <!-- 产品列表 -->
    <div class="cloudForm">
      <cloud-item
        v-for="(item, index) in productItem"
        :key="index"
        :productItem="item"
      ></cloud-item>
    </div>
    <!-- 提示粉丝申请补货 -->
    <van-cell
      is-link
      @click="$router.push('/replenishRecord')"
      class="fanApplication"
    >
      <template #title>
        <span class="fanApplicationImg"></span>
        <span class="custom-title">有3位粉丝近期申请了补货</span>
      </template>
      <template #right-icon>
        <span class="right">查看详情</span>
        <van-icon name="arrow" color="#AFABB7" class="arrow-icon" />
      </template>
    </van-cell>
    <!-- 底部 -->
    <div class="bottom">
      <cloud-bottom>
        <template v-slot:left>
          <span>已选择4件货物</span>
        </template>
        <template v-slot:right>
          <!-- <span @click="$router.push('/deliveryConfirmat')">立即提货</span> -->
          <span @click="gotoConfirm">结算(2)</span>
        </template>
      </cloud-bottom>
    </div>
  </div>
</template>

<script>
import cloudItem from './components/cloudItem'
import cloudBottom from './components/cloudBottom'
import { mapState } from 'vuex'
export default {
  name: 'replenish',
  //   我的云仓 ----(产品列表)选中状态----选中-----立即提货
  components: { cloudItem, cloudBottom },
  computed: {
    ...mapState('product', ['productItem'])
    // ...mapGetters('channel', ['optionalChannels'])
  },
  data() {
    return {
      searchValue: ''
    }
  },
  methods: {
    getSearch(val) {
      this.searchValue = val
    },
    gotoConfirm() {
      // 判断当前有没有选择商品
      console.log(this.productItem)
      let newProduct = this.productItem.filter(function(obj) {
        return obj.select === true
      })
      //   选中的商品保存一份到确认页面
      localStorage.setItem('newProduct', JSON.stringify(newProduct))
      this.$router.push('/deliveryConfirmat')
    }
  }
}
</script>

<style lang="less" scoped>
.replenish {
  background: #f7f6fb;
  //   padding-top: 52px;
  padding-bottom: 104px;
  .cloudForm {
    padding: 12px;
  }
  .fanApplication {
    position: fixed;
    left: 0;
    bottom: 60px;
    background: #e8f2ff;
    .fanApplicationImg {
      position: relative;
      top: -1px;
      display: inline-block;
      width: 20px;
      height: 20px;
      vertical-align: middle;
      background: url('../../assets/font/fanApplication.png') 20px 20px;
      background-size: cover;
    }
    .custom-title {
      font-weight: 400;
      color: #665e75;
    }
    .right {
      font-size: 12px;
      font-weight: 400;
      color: #afabb7;
    }
    .arrow-icon {
      //   width: 20px;
      //   height: 20px;
      //   vertical-align: bottom;
      position: relative;
      top: 6px;
      margin-left: 7px;
    }
  }
}
</style>
